<template>
  <md-nav-bar backUrl="/pages/my/index" title="我的订单" backgroundColor="#ffffff"></md-nav-bar>
  <view class="order-container">
    <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :safearea="true" bottom="80px">
      <view
        v-for="(order, idx) in data.list"
        :key="idx"
        class="order-card"
        @click="onToDetail(order)"
      >
        <!-- 订单头部 -->
        <view class="order-header">
          <view class="order-id">
            <image
            class="order-id-dot"
            src="https://cdn.xmxiaomai.com/isong_static/my/banwan.png"
            mode="widthFix"></image>
            订单编号：{{ order.orderNo }}
          </view>
          <view class="order-status">{{ orderStatus(order.status) }}</view>
        </view>
        <!-- 商品信息 -->
        <view class="order-body">
          <image
            class="order-img"
            :src="order.imageUrl"
            mode="aspectFill"
          />
          <view class="order-info">
            <view class="order-title">{{ order.title }}</view>
            <view class="order-type">{{ order.spuName }}</view>
          </view>
        </view>
        <!-- 订单底部 -->
        <view class="order-footer">
          <view class="order-count">共{{ `1` }}件</view>
          <view class="order-total">
            合计：<text class="order-price">￥{{ formatUnitCentToYuan(order.price, 2) }}</text>
          </view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { onPageScroll, onReachBottom, onShow, onLoad } from '@dcloudio/uni-app';
import { formatUnitCentToYuan, orderStatus } from '@/utils/util';
// 组件
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
// 接口
import api from '@/api/index';
import type { User } from '@/api/data';

const data = reactive({
  list: [] as User.Order.List[],
  canReset: false,
  memberId: ''
});

const onToDetail = (order) => {
  uni.navigateTo({
    url: '/pages/sub/my/myOrderDetail?orderId='+order.orderId,
  });
}
// 分页处理
// 上拉加载的回调: 其中num:当前页 从1开始, size:每页数据条数,默认10
const upCallback = async (mescroll: any) => {
  try {
    let res = await api.Order.purchasePage({
      pageNo: mescroll.num,
      pageSize: mescroll.size,
      memberId: data.memberId
    });
    const curPageData = res?.data?.list || []; // 当前页数据
    if (mescroll.num == 1) data.list = []; // 第一页需手动制空列表
    data.list = data.list.concat(curPageData); //追加新数据
    mescroll.endByPage(curPageData.length, res?.data?.total || 0);
  } catch (e) {
    //TODO handle the exception
    mescroll.endErr(); // 请求失败, 结束加载
  }
};

onLoad(() => {
  data.memberId = uni.getStorageSync('auth')?.userId;
});

onShow(() => {
  data.canReset && getMescroll().resetUpScroll(); // 重置列表数据为第一页
  data.canReset && getMescroll().scrollTo(0, 0); // 重置列表数据为第一页时,建议把滚动条也重置到顶部,避免无法再次翻页的问题
  data.canReset = true; // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
});

</script>

<style lang="scss" scoped>
.order-container {
  min-height: 100vh;
  background: #f5f8f7;
  padding: 0 0 32rpx 0;
}
.order-card {
  background: #fff;
  border-radius: 24rpx;
  margin: 24rpx 24rpx 0 24rpx;
  box-shadow: none;
  padding: 0;
}
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 24rpx 0 24rpx;
  font-size: 28rpx;
}
.order-id {
  color: #222;
  display: flex;
  align-items: center;
  font-size: 26rpx;
}
.order-id-dot {
  display: inline-block;
  width: 15rpx;
  height: 30rpx;
  margin-right: 12rpx;
}
.order-status {
  color: #1fa37a;
  font-size: 28rpx;
}
.order-body {
  display: flex;
  align-items: center;
  padding: 18rpx 24rpx 18rpx 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
}
.order-img {
  width: 96rpx;
  height: 96rpx;
  border-radius: 16rpx;
  background: #eee;
  margin-right: 18rpx;
}
.order-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.order-title {
  font-size: 30rpx;
  color: #222;
  font-weight: 500;
  margin-bottom: 8rpx;
  width: 320rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.order-type {
  font-size: 24rpx;
  color: #888;
}
.order-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 18rpx 24rpx 24rpx 24rpx;
  font-size: 28rpx;
}
.order-count {
  color: #888;
  margin-right: 18rpx;
  font-size: 26rpx;
}
.order-total {
  color: #222;
}
.order-price {
  color: #1fa37a;
  font-size: 32rpx;
  font-weight: 600;
  margin-left: 4rpx;
}
</style>